import { defineComponent, reactive, Teleport } from "vue";
import styles from "./Agreement.module.scss";
import Clause from "@/agreement/clause.vue";
import Guarantee_m from "@/agreement/guarantee_m.vue";
import Statement from "@/agreement/statement.vue";
import Claims from "@/agreement/claims.vue";
import Auth from "@/agreement/auth.vue";
import Inform from "@/agreement/inform.vue";
import Wap_guarantee from "@/agreement/wap_guarantee.vue";

export default defineComponent({
  setup(props: any, { expose }: any) {
    const agreements = reactive({
      list: {
        clause: {
          el: () => <Clause />,
        },
        guarantee_m: {
          el: () => <Guarantee_m />,
        },
        statement: {
          el: () => <Statement />
        },
        claims: {
          el: () => <Claims />
        },
        auth: {
          el: () => <Auth />
        },
        inform: {
          el: () => <Inform />
        },
        wap_guarantee: {
          el: () => <Wap_guarantee />
        },
      },
      show_name: 'clause',
      is_show: false,
    })
    const open = (name: string) => {
      agreements.show_name = name;
      agreements.is_show = true;
    }
    expose({
      open,
    })
    return () => (
      agreements.is_show && (
        <Teleport to="body">
          <div class={styles.Agreement}>
            <div class={styles.card}>
              <div class={styles.content}>
                {
                  Object.entries(agreements.list).map((item: any) => (
                    item[0] === agreements.show_name && item[1].el()
                  ))
                }
              </div>
              <div class={styles.confirm} onClick={() => { agreements.is_show = false }}>确认</div>
            </div>
          </div>
        </Teleport>
      )
    )
  }
})